<template>
<div class='chat-body'>
  <template v-for="msgObj in Chat.msgArr">
    <template v-if="msgObj.login">
      <system-msg :msg="msgObj.user.UserName"></system-msg>
    </template>
    <template v-if="!msgObj.login && !msgObj.logout">
      <other-msg v-if="msgObj.userid!==Chat.Uid" :name="msgObj.username" :msg="msgObj.msg" :color="msgObj.color"></other-msg>
      <self-msg v-if="msgObj.userid===Chat.Uid" :msg="msgObj.msg" :color="msgObj.color"></self-msg>
    </template>
  </template>
</div>
</template>
<script>
import OtherMsg from './OtherMsg'
import SelfMsg from './SelfMsg'
import SystemMsg from './SystemMsg'
import Chat from '../api/client'
console.log('--------------------------')
console.log(Chat)
console.log('--------------------------')
export default {
  name: 'chat-body',
  data () {
    return {
      Chat
    }
  },
  mounted () {
    this.$nextTick(function () {
      if (!localStorage.name) {
        this.$router.push({path: '/'})
      }
    })
  },
  components: {
    OtherMsg,
    SelfMsg,
    SystemMsg
  },
  methods: {
    visit () {
      // var xhr = new XMLHttpRequest()
      // xhr.open('POST', 'http://item.redream.cn/statistics/chat/chat_visit.php'
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState == 4 && xhr.status == 200) {
      //     alert( xhr.responseText )
      //   } else {
      //     alert( xhr.statusText )
      //   }
      // }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chat-body{
  overflow:auto;
  position:absolute;
  top:50px;
  bottom:220px;
  width:61%;
  padding:2%;
  right:5%;
  background:#fff;
}
.chat-box{
  position:absolute;
  top:50px;
  bottom:0;
  overflow-y:hidden;
}
.chat-body h1{
  text-align:center;
  font-size:18px;
  border-bottom:1px solid red;
}
</style>
